<template>
  <a-spin class="table-gl-con" :loading="submitLoading">
    <TableWrap style="flex: 1" @refresh="getTableList">
      <template #tableBody>
        <a-table class="table-singe-line" ref="tableRef" :loading="tableLoading" :bordered="false" :data="tableList" :scroll="{ x: '100%', y: '100%' }" size="mini" :pagination="false">
          <template #columns>
            <a-table-column :width="45" title="序号" fixed="left">
              <template #cell="{ rowIndex }">
                <p>{{ rowIndex + 1 }}</p>
              </template>
            </a-table-column>
            <a-table-column :width="160" title="广告位" fixed="left">
              <template #cell="{ record }">
                <p>{{ PlacementMap[record.placement] || record.placement }}</p>
              </template>
            </a-table-column>
            <a-table-column :width="120" title="竞价策略" fixed="left">
              <template #cell="{ record }">
                <p>{{ DynamicBudgetStrategy[record.dynamicBudgetStrategy] }}</p>
              </template>
            </a-table-column>
            <a-table-column :width="80" title="竞价调整">
              <template #cell="{ record }">
                <div class="flex-c">
                  <p v-if="record.placementBidding || record.placementBidding === 0">{{ record.placementBidding }}%</p>
                  <p v-else>--</p>
                  <!-- 暂时只支持SP广告活动编辑 -->
                  <a-popconfirm v-if="advertStore.currentCampaign && advertStore.currentCampaign.adType === 'SPONSORED_PRODUCTS'" v-model:popup-visible="record.isPopup1" @popup-visible-change="editVal = record.placementBidding" @ok="updateSingle(record)">
                    <template #content>
                      <p class="popconfirm-title">竞价调整</p>
                      <a-input-number v-model="editVal" style="width: 260px" placeholder="" allow-clear />
                      <span>%</span>
                    </template>
                    <icon-edit :class="record.isPopup1 ? 'popup-edit-icon' : 'popup-edit-icon popup-edit-icon-hover'" />
                  </a-popconfirm>
                </div>
              </template>
            </a-table-column>
            <a-table-column :width="70" align="right" data-index="impressions">
              <template #title>
                <a-popover content="广告曝光次数">
                  <p>
                    <span>曝光量</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #cell="{ record }">
                <p v-if="record.impressions || record.impressions === 0">{{ record.impressions }}</p>
                <p v-else>--</p>
              </template>
            </a-table-column>
            <a-table-column :width="70" align="right" data-index="clicks">
              <template #title>
                <a-popover content="广告点击次数">
                  <p>
                    <span>点击量</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #cell="{ record }">
                <p v-if="record.clicks || record.clicks === 0">{{ record.clicks }}</p>
                <p v-else>--</p>
              </template>
            </a-table-column>
            <a-table-column :width="70" title="CTR" align="right" data-index="ctr">
              <template #title>
                <a-popover content="广告点击转化率=点击量/曝光量">
                  <p>
                    <span>CTR</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #cell="{ record }">
                <p v-if="record.ctr || record.ctr === 0">{{ Number(record.ctr).toFixed(2) }}%</p>
                <p v-else>--</p>
              </template>
            </a-table-column>
            <a-table-column :width="70" title="花费" align="right" data-index="cost">
              <template #title>
                <a-popover content="亚马逊广告花费">
                  <p>
                    <span>花费</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #cell="{ record }">
                <p v-if="record.cost || record.cost === 0">${{ Number(record.cost).toFixed(2) }}</p>
                <p v-else>--</p>
              </template>
            </a-table-column>
            <a-table-column :width="70" title="CPC" align="right" data-index="cpc">
              <template #title>
                <a-popover content="单次点击成本，CPC=广告花费/点击量">
                  <p>
                    <span>CPC</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #cell="{ record }">
                <p v-if="record.cpc || record.cpc === 0">${{ Number(record.cpc).toFixed(2) }}</p>
                <p v-else>--</p>
              </template>
            </a-table-column>
            <a-table-column :width="70" title="CVR" align="right" data-index="cvr">
              <template #title>
                <a-popover content="广告转化率，CVR=广告订单量/点击量*100%">
                  <p>
                    <span>CVR</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #cell="{ record }">
                <p v-if="record.cvr || record.cvr === 0">{{ Number(record.cvr).toFixed(2) }}%</p>
                <p v-else>--</p>
              </template>
            </a-table-column>
            <a-table-column :width="70" title="CPA" align="right" data-index="cpa">
              <template #title>
                <a-popover content="单笔订单平均广告花费，CPA=广告花费/广告订单量">
                  <p>
                    <span>CPA</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #cell="{ record }">
                <p v-if="record.cpa || record.cpa === 0">${{ Number(record.cpa).toFixed(2) }}</p>
                <p v-else>--</p>
              </template>
            </a-table-column>
            <a-table-column :width="70" title="总单量" align="right" data-index="purchasesOrder">
              <template #title>
                <a-popover content="广告带来的订单及关联订单数量">
                  <p>
                    <span>总单量</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #cell="{ record }">
                <p v-if="record.purchasesOrder || record.purchasesOrder === 0">{{ record.purchasesOrder }}</p>
                <p v-else>--</p>
              </template>
            </a-table-column>
            <a-table-column :width="80" title="商品销量" align="right" data-index="purchasesSale">
              <template #title>
                <a-popover content="广告商品销量">
                  <p>
                    <span>商品销量</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #cell="{ record }">
                <p v-if="record.purchasesSale || record.purchasesSale === 0">{{ record.purchasesSale }}</p>
                <p v-else>--</p>
              </template>
            </a-table-column>
            <a-table-column :width="80" title="销售额" align="right" data-index="saleAmount">
              <template #title>
                <a-popover content="广告带来的销售额及关联销售额">
                  <p>
                    <span>销售额</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #cell="{ record }">
                <p v-if="record.saleAmount || record.saleAmount === 0">${{ Number(record.saleAmount).toFixed(2) }}</p>
                <p v-else>--</p>
              </template>
            </a-table-column>
            <a-table-column :width="70" title="ACOS" align="right" data-index="acos">
              <template #title>
                <a-popover content="投入产出比，ACOS=广告花费/广告销售额*100%">
                  <p>
                    <span>ACOS</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #cell="{ record }">
                <p v-if="record.acos || record.acos === 0">{{ Number(record.acos).toFixed(2) }}%</p>
                <p v-else>--</p>
              </template>
            </a-table-column>
            <a-table-column :width="70" title="ROAS" align="right" data-index="roas">
              <template #title>
                <a-popover content="支出回报，ROAS=广告销售额/广告花费">
                  <p>
                    <span>ROAS</span>
                    <icon-question-circle />
                  </p>
                </a-popover>
              </template>
              <template #cell="{ record }">
                <p v-if="record.roas || record.roas === 0">{{ Number(record.roas).toFixed(2) }}</p>
                <p v-else>--</p>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>
    </TableWrap>
  </a-spin>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { getPlacementList, updatePlacement } from '@/api/advert'
  import { Message } from '@arco-design/web-vue'
  import { DynamicBudgetStrategy, PlacementMap, PlacementToPlacementMap } from '../../types'
  import useAdvertStore from '@/store/modules/advert'
  const props = defineProps({
    searchParams: {
      type: Object,
      default: () => {},
    },
  })

  const total = ref(0)
  const tableLoading = ref(false)
  const tableList = ref<Array<any>>([])
  const editVal = ref<any>()
  const submitLoading = ref(false)
  const advertStore = useAdvertStore()

  // 获取广告位列表数据
  async function getTableList() {
    tableLoading.value = true
    const res: any = await getPlacementList({
      ...props.searchParams,
    })
    tableLoading.value = false
    tableList.value = res?.data || []
    total.value = res?.data?.total || 0
  }

  // 修改广告位竞价
  async function updateSingle(item: any) {
    if (!editVal.value) {
      Message.error('参数必填')
      return false
    }
    let params: any = {
      campaignId: item.campaignId,
      shopId: item.shopId,
      placement: PlacementToPlacementMap[item.placement] || item.placement,
      percentage: editVal.value,
    }
    submitLoading.value = true
    let res: any = await updatePlacement(params)
    submitLoading.value = false
    if (res) {
      Message.success('修改成功')
      getTableList()
    }
  }
  defineExpose({ getTableList })
</script>
<style lang="less" scoped>
  .table-gl-con {
    height: 100%;
  }
  .gray {
    color: #999;
  }
  .normal {
    color: var(--color-text-2);
  }
  :deep(.arco-table-sorter) {
    margin-left: 2px;
  }
  .popconfirm-title {
    font-size: 14px;
    margin-bottom: 10px;
  }
</style>
